<script setup lang="ts">
import { PropType, computed } from "vue";
import Row from "@/components/Row.vue";
import { ElInput, ElInputNumber, ElDatePicker, ElTreeSelect, ElCascader, ElButton, ElSwitch } from "element-plus";
const props = defineProps({
  data: { type: Array as PropType<gt.components.SideBar.Filter[]>, default: [] },
  isRow: { type: Boolean, default: false },
}),
  rowWidth = computed(() => {
    return props.isRow ? '20em' : "100%";
  }),
  emit = defineEmits<{ (event: "filter", value: gt.components.SideBar.Filter): void; }>();
function e(value: gt.components.SideBar.Filter) {
  emit("filter", value);
  if (value.onChange instanceof Function) {
    value.onChange(value);
  }
}
</script>
<template>
  <div :class="['Filter', isRow ? 'xw' : 'y']">
    <Row class="plr04em" v-for="(i, ii) in data" :key="ii"
      :style="i.type == 'button' && !i.label ? 'width:inherit;' : ''" :="i">
      <ElInput v-if="i.type === 'input'" :="i.opt" v-model="i.value" @change="e(i)" />
      <ElInputNumber v-else-if="i.type === 'number'" :="i.opt" v-model="i.value" @change="e(i)" />
      <ElDatePicker v-else-if="i.type === 'datePicker'" :="i.opt" v-model="i.value" @change="e(i)" />
      <ElTreeSelect v-else-if="i.type === 'treeSelect'" :="i.opt" v-model="i.value" @change="e(i)" class="treeSelect" />
      <ElCascader v-else-if="i.type === 'cascader'" :="i.opt" v-model="i.value" @change="e(i)" />
      <ElButton v-else-if="i.type === 'button'" :="i.opt" v-model="i.value" @change="e(i)">{{ i.value }}</ElButton>
      <ElSwitch v-else-if="i.type === 'switch'" :="i.opt" v-model="i.value" @change="e(i)" />
    </Row>
  </div>
</template>
<style lang="scss" scoped>
.Filter {
  position: relative;
  max-height: 40%;
  overflow-y: auto;
  overflow-x: hidden;
  height: max-content;
  >.plr04em {
    width: v-bind(rowWidth);
  }
  :deep(>.Row>.dr) {
    height: max-content;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: inherit;
    // box-shadow: none;
    cursor: inherit;

    >i,
    >span {
      color: var(--color-text);
    }

    > :first-child {
      margin-bottom: 0.4em;
    }

    >input {
      width: 100%;
      border: 1px solid var(--color-border);
      border-radius: 0.4em;
      background-color: var(--color-white);
    }
  }
}
</style>
